/* 定义颜色调色板，来源于 https://github.com/vuejs/theme */
:root {
  /* 白色系列变量 */
  --vt-c-white: #ffffff; /* 主白色 */
  --vt-c-white-soft: #f8f8f8; /* 柔和白色 */
  --vt-c-white-mute: #f2f2f2; /* 静默白色 */

  /* 黑色系列变量 */
  --vt-c-black: #181818; /* 主黑色 */
  --vt-c-black-soft: #222222; /* 柔和黑色 */
  --vt-c-black-mute: #282828; /* 静默黑色 */

  /* 紫罗兰色变量 */
  --vt-c-indigo: #2c3e50; /* 主要文本颜色或背景色 */

  /* 分割线颜色变量 */
  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); /* 浅色分割线1 */
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); /* 浅色分割线2 */
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); /* 深色分割线1 */
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); /* 深色分割线2 */

  /* 文本颜色变量 */
  --vt-c-text-light-1: var(--vt-c-indigo); /* 浅色文本1 */
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66); /* 浅色文本2 */
  --vt-c-text-dark-1: var(--vt-c-white); /* 深色文本1 */
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); /* 深色文本2 */
}

/* 为本项目定义语义化颜色变量 */
:root {
  --color-background: var(--vt-c-white); /* 页面背景色 */
  --color-background-soft: var(--vt-c-white-soft); /* 柔和背景色 */
  --color-background-mute: var(--vt-c-white-mute); /* 静默背景色 */

  --color-border: var(--vt-c-divider-light-2); /* 边框颜色 */
  --color-border-hover: var(--vt-c-divider-light-1); /* 鼠标悬停边框颜色 */

  --color-heading: var(--vt-c-text-light-1); /* 标题颜色 */
  --color-text: var(--vt-c-text-light-1); /* 正文颜色 */
  
  --section-gap: 160px; /* 区域间距大小 */
}

/* 当用户偏好深色模式时重置颜色 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black); /* 深色模式下的页面背景色 */
    --color-background-soft: var(--vt-c-black-soft); /* 深色模式下的柔和背景色 */
    --color-background-mute: var(--vt-c-black-mute); /* 深色模式下的静默背景色 */

    --color-border: var(--vt-c-divider-dark-2); /* 深色模式下的边框颜色 */
    --color-border-hover: var(--vt-c-divider-dark-1); /* 深色模式下鼠标悬停边框颜色 */

    --color-heading: var(--vt-c-text-dark-1); /* 深色模式下的标题颜色 */
    --color-text: var(--vt-c-text-dark-2); /* 深色模式下的正文颜色 */
  }
}

/* 全局样式设置 */
*,
*::before,
*::after {
  box-sizing: border-box; /* 盒模型为 border-box */
  margin: 0; /* 初始化所有元素的外边距为零 */
  font-weight: normal; /* 设置所有元素字体粗细为正常 */
}

/* 设置 body 的基本样式 */
body {
  min-height: 100vh; /* 确保最小高度为视口高度 */
  color: var(--color-text); /* 文本颜色 */
  background: var(--color-background); /* 背景颜色 */
  transition: 
    color 0.5s, /* 文本颜色过渡时间为0.5秒 */
    background-color 0.5s; /* 背景颜色过渡时间为0.5秒 */
  line-height: 1.6; /* 行高为1.6 */
  font-family: 
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif; /* 使用一套系统支持的字体栈 */
  font-size: 15px; /* 基础字体大小为15像素 */
  text-rendering: optimizeLegibility; /* 提高文本可读性 */
  -webkit-font-smoothing: antialiased; /* 启用WebKit引擎的字体平滑效果 */
  -moz-osx-font-smoothing: grayscale; /* 在Firefox中启用字体平滑效果 */
}